<!--  checkbox 多选 - 属性面板 -->
<template>
  <div class="checkboxAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="lab">占位文案：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.placeholder"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">多选互斥</div>
          <div><t-switch v-model="attributeset.data.isExclude" /></div>
        </div>
        <div v-if="attributeset.data.isExclude" class="fx-sb fx-al-ct">
          <div class="lab">互斥选项</div>
          <div>
            <t-select
              v-model="attributeset.data.excludeOptions"
              placeholder="请选择"
              multiple
              size="small"
              class="selectCont"
            >
              <t-option
                v-for="item in attributeset.data.titlab"
                :key="item"
                :label="item"
                :value="item"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">最少应选：</div>
          <div>
            <t-input
              :value="attributeset.data.minLength"
              type="number"
              size="small"
              placeholder="请输入长度"
              @change="minLengthInput"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">最多应选：</div>
          <div>
            <t-input
              :value="attributeset.data.maxLength"
              type="number"
              size="small"
              placeholder="请输入长度"
              @change="maxLengthInput"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">排列方式</div>
          <div>
            <t-radio-group
              v-model="attributeset.data.direction"
              default-value="1"
              size="small"
            >
              <t-radio-button value="row">横向</t-radio-button>
              <t-radio-button value="column">纵向</t-radio-button>
            </t-radio-group>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值</div>
          <div>
            <div class="defaultValueCont" @click="openCheckDefaultValue">
              <div v-if="Array.isArray(attributeset.data.defaultValue)">
                <span
                  v-for="item in attributeset.data.defaultValue"
                  :key="item"
                  >{{ item }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="lab">选项：<span>最多200项，每项最多50字</span></div>
        <div class="radioOptions fx-ct">
          <span
            class="bt"
            :class="{ 'bt-grey': attributeset.data.dataType !== 'static' }"
            @click="dataTypeChange('static')"
            >静态数据</span
          >
          <span
            class="bt"
            :class="{ 'bt-grey': attributeset.data.dataType !== 'dynamic' }"
            @click="dataTypeChange('dynamic')"
            >动态数据</span
          >
        </div>
        <div v-show="attributeset.data.dataType == 'static'">
          <div ref="opScroll" class="optionsCont">
            <div
              v-for="(item, ind) in attributeset.data.titlab"
              :key="ind"
              class="labTitBox fx"
            >
              <t-input
                type="text"
                :value="item"
                size="small"
                placeholder="请输入选项名"
                @input="(event) => labTitChang(event, ind)"
              />
              <span class="sub" @click="labTitChang('sub', ind)"> - </span>
            </div>
          </div>
          <div class="actionRdOpt">
            <span @click="bulkEdit()">批量编辑</span>
            <span @click="labTitChang('add', attributeset.data.titlab.length)">
              添加选项
            </span>
            <!-- <span>添加其他</span>
            <span>关联控件</span> -->
          </div>
        </div>
        <div
          v-show="attributeset.data.dataType == 'dynamic'"
          class="dynamicSet"
        >
          <t-input-adornment prepend="接口请求地址：">
            <t-input placeholder="请输入地址" />
          </t-input-adornment>
          <t-input-adornment prepend="请求方式：">
            <t-input placeholder="请求方式" />
          </t-input-adornment>
          <t-input-adornment prepend="key：">
            <t-input placeholder="请输入请求key" />
          </t-input-adornment>
          <t-input-adornment prepend="value：">
            <t-input placeholder="请输入参数值" />
          </t-input-adornment>
        </div>
      </div>
    </div>
    <t-dialog
      v-model:visible="visible"
      header="批量编辑选项"
      width="70%"
      @confirm="editConfirm"
      @close="closeDialog"
    >
      <!-- 批量编辑的输入框 -->
      <t-textarea
        v-if="visibleType === 'allAdd'"
        v-model="editOptions"
        :autosize="{ minRows: 10, maxRows: 20 }"
        placeholder="请输入选项并换行"
      />
      <!-- 默认值选择框 -->
      <div v-else>
        <t-checkbox-group
          :value="attributeset.data.defaultValue"
          :max="Number(attributeset.data.maxLength) || Infinity"
          @change="checkboxHandle"
          @click="checkboxClick(attributeset)"
        >
          <t-checkbox
            v-for="item in defaultValueOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </t-checkbox-group>
        <div
          v-show="
            attributeset.data.minLength > 0 &&
            attributeset.data.defaultValue.length <
              attributeset.data.minLength &&
            attributeset.data.defaultValue.length !== 0
          "
          class="error"
        >
          <span>最少应选 {{ attributeset.data.minLength }} 个</span>
          <span
            v-show="
              attributeset.data.maxLength &&
              attributeset.data.maxLength != Infinity
            "
            >最多应选 {{ attributeset.data.maxLength }} 个</span
          >
        </div>
      </div>
    </t-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })
const visibleType = ref('defaultValue') // 'defaultValue' 默认值  allAdd 批量添加选项
// 打开默认值的选择框
const openCheckDefaultValue = () => {
  visible.value = true
  visibleType.value = 'defaultValue'
}
// 最小值 输入
const minLengthInput = (val) => {
  if (val < 0) {
    attributeset.data.minLength = 0
    attributeset.data.defaultValue = []
    return
  }
  if (
    attributeset.data.maxLength &&
    attributeset.data.maxLength !== Infinity &&
    val > attributeset.data.maxLength
  ) {
    attributeset.data.minLength = attributeset.data.maxLength
  } else {
    attributeset.data.minLength = val
  }
  attributeset.data.defaultValue = []
}
// 最大值 输入
const maxLengthInput = (val) => {
  if (val < 0) {
    attributeset.data.maxLength = 0
    attributeset.data.defaultValue = []
    return
  }
  if (
    attributeset.data.minLength &&
    attributeset.data.minLength !== -Infinity &&
    val < attributeset.data.minLength
  ) {
    attributeset.data.maxLength = attributeset.data.minLength
  } else {
    attributeset.data.maxLength = val
  }
  attributeset.data.defaultValue = []
}

// 暂存多选点击选项
const changeItem = ref()
const checkboxClick = (item) => {
  changeItem.value = item
}
// 互斥选项处理 - 多选
const checkboxHandle = (val, context) => {
  const item = changeItem.value
  // 取消选项
  const ckInd = attributeset.data.defaultValue.indexOf(context.current)
  if (ckInd !== -1) {
    attributeset.data.defaultValue.splice(ckInd, 1)
    return
  }
  // 选中
  if (item.data.excludeOptions && item.data.excludeOptions.length > 0) {
    const ind = item.data.excludeOptions.findIndex(
      (el) => el === context.current
    )

    // 如果有互斥项已经被选 做标记
    const valInd = attributeset.data.defaultValue.findIndex(
      (el) => el === context.current
    )
    // debugger
    // 已经选择了一个互斥项
    if (
      Array.isArray(attributeset.data.defaultValue) &&
      attributeset.data.defaultValue.length === 1 &&
      item.data.excludeOptions.findIndex(
        (el) => attributeset.data.defaultValue[0] === el
      ) !== -1
    ) {
      attributeset.data.defaultValue = [context.current]
      return
    }
    // 互斥项处理 - 互斥选项中没有并且也没有被选中过
    if (ind === -1 && valInd === -1) {
      if (
        Array.isArray(attributeset.data.defaultValue) &&
        attributeset.data.defaultValue.length === 0
      ) {
        attributeset.data.defaultValue = [context.current]
      } else {
        attributeset.data.defaultValue.push(context.current)
      }
      // 在互斥选项中有并且已经被选中直接清空
    } else if (ind !== -1 && valInd !== -1) {
      attributeset.data.defaultValue = []
      // 在互斥选项中有并且没有被选中 直接选中
    } else if (ind !== -1 && valInd === -1) {
      attributeset.data.defaultValue = [context.current]
    }
  } else {
    attributeset.data.defaultValue = val
  }
}
// 数据类型选择
const dataTypeChange = (val) => {
  attributeset.data.dataType = val
}

// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
const opScroll = ref()
// 选项操作包括增、删、改
const labTitChang = (st, ind) => {
  if (typeof st === 'string' && st === 'add') {
    attributeset.data.titlab.push(`选项${attributeset.data.titlab.length + 1}`)
    scrollBottom()
  } else if (typeof st === 'string' && st === 'sub') {
    attributeset.data.titlab.splice(ind, 1)
  } else {
    if (st.data && st.inputType === 'insertText') {
      attributeset.data.titlab[
        ind
      ] = `${attributeset.data.titlab[ind]}${st.data}`
    } else if (st.inputType === 'deleteContentBackward') {
      // 这里留个坑吧 无法选中直接全删只能一个一个删 影响没那么大解决比较耗时
      attributeset.data.titlab[ind] = attributeset.data.titlab[ind].slice(0, -1)
    } else if (st.inputType === 'insertCompositionText') {
      attributeset.data.titlab[ind] = st.target.value
    }
  }
}
// 批量编辑
const visible = ref(false)
const editOptions = ref('')
const bulkEdit = () => {
  visible.value = true
  visibleType.value = 'allAdd'
  editOptions.value = ''
  const { titlab } = attributeset.data
  titlab.forEach((el, i) => {
    editOptions.value += titlab.length - 1 === i ? el : `${el}\n`
  })
}
// 批量编辑 - 确定
const editConfirm = () => {
  if (
    visibleType.value === 'defaultValue'
    // attributeset.data.defaultValue.length > attributeset.data.minLength &&
    // attributeset.data.defaultValue.length < attributeset.data.maxLength
  ) {
    visible.value = false
    return
  }
  if (visibleType.value === 'allAdd') {
    const data = editOptions.value
      .split('\n')
      .map((n, i) => (n === '' ? `选项${i}` : n))
    attributeset.data.titlab = data
    visible.value = false
    scrollBottom()
  }
}
const scrollBottom = () => {
  opScroll.value.scrollTo({
    top: opScroll.value.scrollHeight,
    behavior: 'smooth'
  })
}
// 关闭弹窗
const closeDialog = () => {
  if (visibleType.value === 'defaultValue') {
    attributeset.data.defaultValue = []
  }
}
// 处理默认值和选项配置的同步下拉问题
const defaultValueOptions = ref(attributeset.data.titlab)
watch(
  () => props.arrtData.data.titlab,
  (val) => {
    defaultValueOptions.value = val
  },
  { deep: true }
)
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
<style scoped>
.checkboxAttr .optionsCont {
  height: 136px;
}
</style>
